<template>
	<view class="leave-info-box">
		<view class="leave-info-content">
			<view class="leave-info-name biaoti1">{{ name }}</view>
			<view class="leave-info-classnumber zhengwen1">
				<view class="class-number">{{ id }}</view>
				<view class="class-name">{{classname}}</view>
			</view>
			<view class="time-title biaoti1">请假时间</view>
			<view class="leave-info-time zhengwen1">
				<view class="leave-info-left-time">
					<view>开始时间</view>
					<view class="start-time">
						<text class="start-date">{{startdate}}</text>
						<text class="start-time">{{starttime}}</text>
					</view>
				</view>
				<view class="leave-info-right-time">
					<view>结束时间</view>
					<view class="end-time">
						<text class="end-date">{{enddate}}</text>
						<text class="end-time">{{endtime}}</text>
					</view>
				</view>
			</view>
				<view class="num-time zhengwen1">总时长{{ numtime}}小时</view>
			<view class="leave-explain-title biaoti1">请假理由</view>
			<view class="leave-explain-content zhengwen1">{{ explain}}</view>
			<view class="leave-course-title biaoti1">外出路线描述</view>
			<view class="leave-course-content zhengwen1">{{ course }}</view>
			<view class="leave-img-title biaoti1">查看图片</view>
			<view class="leave-img">
				<!-- 是否改成滑动模块 -->
				<view class="imgbox">
					<image src="../../static/test1.jpg" @click="open"></image>
				</view>
				<view class="imgbox">
					<image src="../../static/dImg.jpg" @click="open"></image>
				</view>
				<view class="imgbox">
					<image src="../../static/dImg.jpg" @click="open"></image>
				</view>
				<view class="imgbox">
					<image src="../../static/dImg.jpg" @click="open"></image>
				</view>
			</view>
			<view class="teacher">
				<textarea 
				name="" 
				id="yijian" 
				class="zhengwen1" 
				placeholder="导员意见"
				placeholder-style="text-align: center;line-height: 160rpx;font-size: 36rpx;"
				></textarea>
			</view>
			<view class="yes biaoti1">等待书记批准</view>
			
		</view>
		<view>
					<view class="shadebox" v-if="imgshow" @click="close">
						<view class="shadecontentbox">
							<image :src="imgurl" class="imgHD" mode="widthFix"></image>	
						</view>
					</view>
		</view>
		<!-- <imgHD ref="popup" type="bottom"></imgHD> -->
	</view>
</template>

<script>
	// import imgHD from "@/pages/components/imgHD.vue"
	export default {
		data() {
			return {
				id:'',
				name:'',
				classname:'计算机应用2班',
				startdate:'2022-6-9',
				starttime:'8:00',
				enddate:'2022-6-9',
				endtime:'12:00',
				numtime:'4',
				explain:'生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。',
				course:'xxxxxx地铁站，xxxxxx医院，xxxxxxxxx餐厅，xxxxxxxx地铁站，xxxxxxxx公交车，返回学校',
				imgurl:'../../static/test1.jpg',
				imgshow:false,
				
				
				
			}
		},
		methods: {
			open(){
			        this.imgshow = true;
			      },
				close(){
					this.imgshow = false;
				}
				  
		},
		onLoad(options){
			// 提交数据请求接口
			// uni.request({
			// 	url:'http://html5.bjsxt.cn/api/course/detail',
			// 	data:{
			// 		id:options.id,
			// 		course:options.course
			// 	},
			// 	success:(res) => {
			// 		this.getData = res.data.data;
			// 		this.introduceList = res.data.data.introduceList;
			// 		this.Clist = res.data.data.Clist;
			// 		this.imgT = res.data.data.image;
			// 		this.imageHeight = res.data.data.height;
			// 		// console.log(this.imgT);
			// 	}
			// })
			this.id = options.id,
			this.name = options.name
		},
		components:{
			// imgHD
		}
	}
</script>

<style lang="scss">
@import url(@/static/common.css);
.leave-info-box{
	width: 95%;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	.leave-info-content{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
		.leave-info-name{
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			justify-content: center;
		}
		.leave-info-classnumber{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			.class-number{
				flex: 1;
				
			}
			.class-name{
				flex: 2;
				
			}
		}
		.time-title{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-info-time{
			display: flex;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			border: 1rpx solid #999999;
			padding: 20rpx;
			.leave-info-left-time{
				flex: 1;
				text{
					letter-spacing: 1rpx;
					line-height: 40rpx;
				}
				.start-date{
					margin-right: 20rpx;
				}
				
			}
			.leave-info-right-time{
				flex: 1;
				text{
					letter-spacing: 1rpx;
					line-height: 40rpx;
				}
				.end-date{
					margin-right: 20rpx;
				}
			}
			
		}
		.num-time{
			margin-top: 20rpx;
		}
		.leave-explain-title{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-explain-content{
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #999999;
			padding: 20rpx;
		}
		.leave-course-title{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-course-content{
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #999999;
			padding: 20rpx;
		}
		.leave-img-title{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-img{
			display: flex;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 10rpx;
			overflow: hidden;
			.imgbox{
				flex: 1;
				image{
					width: 150rpx;
					height: 150rpx;	
				}
			}
		}
		.teacher{
			width: 100%;
			box-sizing: border-box;
			margin-top: 40rpx;
			textarea{
				box-sizing: border-box;
				width: 100%;
				height: 200rpx;
				border: 1rpx solid #999999;
				padding: 20rpx;
			}
		}
		.yes{
			width: 600rpx;
			height: 80rpx;
			border: #999999 solid 1rpx;
			margin: 0 auto;
			margin-top: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #cb1111;
			margin-bottom: 80rpx;
		}
		
		
		
	}
	.shadebox{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background: rgba(0,0,0,0.6);
		padding-top: 50%;
		.shadecontentbox{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 50%;
			.imgHD{
				width: 100%;
				margin-top: -25%;
			}
		}
	}
	// }
	
}
</style>
